<template>
  <div class="index">
    <NavBar />
    <div class="container">
      <div class="item w73 tags-l">
        <div class="item-h tags-l-h">
          <router-link :to="{path:'/'}" class="ftz16">首页</router-link><i>></i>
          <router-link :to="{path:'/viewpoint'}" class="ftz16">观点</router-link><i>></i>
          <h1 class="ftz16">{{id}}</h1>
        </div>
        <div class="tags-l-c">
          <ul>
            <li v-for="(item,index) in data" :key="index">
              <router-link class="images" :to="{name:'articleDetails', params: {id: item.viewPointId}}"><img :src="item.imgUrl"></router-link>
              <div class="info fr">
                <router-link class="title ftz18" :to="{name:'articleDetails', params: {id: item.viewPointId}}">{{item.title}}</router-link>
                <router-link class="txt" :to="{name:'articleDetails', params: {id: item.viewPointId}}">{{item.summary}}</router-link>
                <div class="tip">
                  <span class="photo">
                    <img style="cursor:pointer;" @click="linkToDashboard(item.userId)" :src="item.avatar"></span><span>{{item.author}}</span><span class="line"></span><span>10分钟前</span><span
                    class="line"></span><span>阅读量：{{item.hot}}</span><span class="line"></span><span>分类：{{item.classifyName}}</span>
                </div>
              </div>
            </li>
          </ul>
          <laypage v-if="total>0" :pageSize.sync="pageData.pageSize" :total="total" :pageNum.sync="pageData.pageNum" @changePage="getData"></laypage>
        </div>
      </div>

      <div class="w23 fr tags-r">
        <div class="item master">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">相关大咖</b>
          </div>
          <div class="master-c">
            <ul>
              <li v-for="(item,index) in related" :key="index">
                <div class="photo">
                  <a href="javascript: void(0)" class="images"><img  style="cursor:pointer;" @click="linkToDashboard(item.userId)" :src="item.headImg"></a>
                  <img src="../../assets/res/img/icon_appr.png" class="appr">
                </div>
                <div class="info fr">
                  <a href="javascript: void(0)" class="name ftz16"  style="cursor:pointer;" @click="linkToDashboard(item.userId)">{{item.authName}}</a>
                  <span v-if="item.authType === '1'" class="line"></span>
                  <span  v-if="item.authType === '1'" >{{item.orgName}}</span>
                  <p>{{item.descreption}}</p>
                  <button :class="{'followed':item.isMyFocus === '0'}" @click="modifyUserFocusEvent(item)">{{item.isMyFocus === '0'?'已关注':'+关注'}}</button>
                  <button @click="$router.push('/qa')">提问</button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  components: {
    NavBar,
    Footer,
    laypage: () => import('@/components/laypage')
  },
  data () {
    return {
      id: null,
      related: [],
      total: 0,
      pageData: {
        pageSize: 10,
        pageNum: 1
      },
      data: [],
      pload: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    // 来源网址
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  mounted () {
    this.id = this.$route.params.id
  },
  watch: {
    id () {
      this.getData()
      this.getTagsRelated()
    }
  },
  methods: {
    modifyUserFocusEvent (item) {
      let eventName = item.isMyFocus === '0' ? '取消关注' : '关注'
      if (!this.userId) {
        window.layui.layer.msg('请登录后再' + eventName + '！')
        return false
      }
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认' + eventName + '吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.modifyUserFocus(item)
          window.layer.closeAll()
        }
      })
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          // this.$router.push('/dashboardAuth')
          this.$router.push('/dashboardUser')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    async modifyUserFocus (item) {
      await api.modifyUserFocus({
        focusUserId: item.userId,
        focusStatus: item.isMyFocus === '0' ? '1' : '0'
      })
      this.getTagsRelated()
    },
    async getData (page) {
      this.pload = false
      try {
        let res = await api.getTagsList({ ...this.pageData, pageNum: page, tags: this.id })
        console.log(res)
        this.data = res.data.data.list
        this.total = res.data.data.total
        this.pload = true
      } catch (error) {
      }
    },
    async getTagsRelated () {
      try {
        let res = await api.getTagsRelated({ tags: this.id })
        this.related = res.data.data
      } catch (error) {
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/tags";
.followed{
  background: #a6a6a6 !important;
}
</style>
